<template>
  <!--底部标签组件-->
  <!--  <van-tabbar v-model="active" v-if="tabbarActive">-->
  <!--    <van-tabbar-item name="" icon="wap-home-o" to="/">首页</van-tabbar-item>-->
  <!--    <van-tabbar-item name="contact" icon="friends-o" to="/contact"-->
  <!--      >联系人</van-tabbar-item-->
  <!--    >-->
  <!--    <van-tabbar-item name="sns" icon="user-circle-o" to="/sns"-->
  <!--      >社区</van-tabbar-item-->
  <!--    >-->
  <!--    <van-tabbar-item name="users" icon="user-o" to="/users"-->
  <!--      >我的</van-tabbar-item-->
  <!--    >-->
  <!--  </van-tabbar>-->
  <!--  -->
  <van-tabbar
    v-model="active"
    active-color="#ff8040d9"
    inactive-color="#949494"
    v-if="tabbarActive"
  >
    <!--/-->
    <van-tabbar-item name="" to="/">
      <span>首页</span>
      <template #icon="props">
        <svg class="x-icon" aria-hidden="true">
          <use
            :xlink:href="
              props.active ? '#icon-chongwujiyang' : '#icon-chongwujiyang-copy'
            "
          ></use>
        </svg>
      </template>
    </van-tabbar-item>
    <!--contact-->
    <van-tabbar-item name="contact" to="/contact">
      <span>联系人</span>
      <template #icon="props">
        <svg class="icon" aria-hidden="true">
          <use
            :xlink:href="
              props.active ? '#icon-lianxiren1-copy' : '#icon-lianxiren1'
            "
          ></use>
        </svg>
      </template>
    </van-tabbar-item>
    <!--sns-->
    <van-tabbar-item name="sns" to="/sns">
      <span>社区</span>
      <template #icon="props">
        <svg class="x-icon" aria-hidden="true">
          <use
            :xlink:href="
              props.active
                ? '#icon-shequ-weijihuo-copy-copy'
                : '#icon-shequ-weijihuo'
            "
          ></use>
        </svg>
      </template>
    </van-tabbar-item>
    <!--users-->
    <van-tabbar-item name="users" to="/users">
      <span>我的</span>
      <template #icon="props">
        <svg class="icon" aria-hidden="true">
          <use
            :xlink:href="
              props.active ? '#icon-chongwudengji' : '#icon-chongwudengji-copy'
            "
          ></use>
        </svg>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { ref, watchEffect } from "vue";
import { useRoute } from "vue-router";

export default {
  name: "Tabbar",
  setup() {
    //标签选中值
    const active = ref("home");
    //组件状态
    const tabbarActive = ref(true);
    const route = useRoute();
    watchEffect(() => {
      //获取路由并修改标签选中值
      active.value = route.fullPath.split("/")[1];
      //路由跳转时---辨别是否在标签页面，控制它的显示隐藏
      if (
        active.value != "" &&
        active.value != "contact" &&
        active.value != "sns" &&
        active.value != "users"
      ) {
        tabbarActive.value = false;
      } else {
        tabbarActive.value = true;
      }
    });
    return { active, tabbarActive };
  },
};
</script>

<style scoped>
.icon,
.x-icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.x-icon {
  width: 1.7rem;
  height: 1.7rem;
}
</style>
